{% load i18n %}
<script id="configs_template" type="text/template">
    <tr id_attr="$id" class="row data-row">
        <td class="col-sm-5 small-padding">
            <input type="text" class="form-control" field="key" list="properties" placeholder="{% trans "Select property name" %}"
                   onkeyup="trySetValue(this)" onchange="trySetValue(this)" onclick="trySetValue(this)"
                   value="$name" />
        </td>
        <td class="col-sm-5 small-padding">
            <input type="text" class="form-control" field="value"
                   onkeyup="set_props()" onchange="set_props()" onclick="set_props()"
                   value="$value" />
        </td>
        <td class="col-sm-2 small-padding">
            <input type="button" class="btn btn-danger"
                   onclick="delete_prop(this)" value="{%  trans "Remove" %}" />
        </td>
    </tr>
</script>
<script id="args_template" type="text/template">
    <tr id_attr="$id" class="row data-row">
        <td class="col-sm-5 small-padding">
            <input type="text" class="form-control" field="key"
                   onkeyup="set_props()" onchange="set_props()" onclick="set_props()"
                   value="$name" />
        </td>
        <td class="col-sm-5 small-padding">
            <input type="text" class="form-control" field="value"
                   onkeyup="set_props()" onchange="set_props()" onclick="set_props()"
                   value="$value" />
        </td>
        <td class="col-sm-2 small-padding">
            <input type="button" class="btn btn-danger"
                   onclick="delete_prop(this)" value="{%  trans "Remove" %}" />
        </td>
    </tr>
</script>
<script id="args_array_template" type="text/template">
    <tr id_attr="$id" class="row data-row">
        <td class="col-sm-10 small-padding">
            <input type="text" class="form-control" field="value"
                   onkeyup="set_props()" onchange="set_props()" onclick="set_props()"
                   value="$value" />
        </td>
        <td class="col-sm-2 small-padding">
            <input type="button" class="btn btn-danger"
                   onclick="delete_prop(this)" value="{%  trans "Remove" %}" />
        </td>
    </tr>
</script>
<script id="table_template" type="text/template">
    <table>
        <tr class="row">
            <td class="col-sm-5 small-padding"><label>{% trans "Name" %}</label></td>
            <td class="col-sm-5 small-padding"><label>{% trans "Value" %}</label></td>
        </tr>
    </table>
    <div class="input">
        <a class="btn btn-default btn-inline" onclick="add_prop('$target');">{% trans "Add" %}</a>
    </div>
</script>
<script id="array_table_template" type="text/template">
    <table>
        <tr class="row">
            <th class="col-sm-10 small-padding"><label>{% trans "Value" %}</label></th>
        </tr>
    </table>
    <div class="input">
        <a class="btn btn-default btn-inline" onclick="add_prop('$target');">{% trans "Add" %}</a>
    </div>
</script>
<script type="text/javascript">
    function get_next_id(target) {
        var max = -1;
        $("#" + target + " tr.data-row").each(function () {
            max = Math.max(max, parseInt($(this).attr("id_attr")));
        });
        return max + 1;
    }

    function set_props() {
        $(targets).each(function (index, target) {
          if (target.match(/.*?array.*/) != null) {
            var configs = [];
            $("#" + target + " tr.data-row").each(function (index) {
                configs[index] = $(this).find("td input[field=value]").val();
            });
            $("#job_" + target).val(JSON.stringify(configs));
          } else {
            var configs = {};
            $("#" + target + " tr.data-row").each(function () {
                var key = $(this).find("td input[field=key]").val();
                configs[key] = $(this).find("td input[field=value]").val();
            });
            $("#job_" + target).val(JSON.stringify(configs));
          }
        });
    }

    function add_prop(target, name, value) {
        var name = (typeof name === 'undefined') ? '' : name;
        var value = (typeof value === 'undefined') ? '' : value;
        $("#" + target + " table").show();
        var id = get_next_id(target);
        var tmpl_from = target == "params" ? "args" : target;
        var template = $("#" + tmpl_from + "_template").text()
                .replace(/\$id/g, id);
        template = template.replace(/\$name/g, name);
        template = template.replace(/\$value/g, value);
        $("#" + target + " tr").last().after(template);
        set_props();
        return id
    }
    function delete_prop(el) {
        var tr = $(el).closest("tr");
        var target = $(tr).closest("div").attr("id");
        tr.remove();
        var id = get_next_id(target);
        if (id == 0) {
            $("#" + target + " table").hide();
        }
        set_props();
    }

    function trySetValue(el) {
        var prop_id = $(el).parent().attr("id_attr");
        if (properties[$(el).val()] != "undefined") {
            $("#configs").find("tr[id_attr='" + prop_id + "']")
                    .find("td input[field=value]").val(properties[$(el).val()])
        }
        set_props();
    }

    function get_targets(job_type) {
        var res = ["configs"];
        if ($.inArray(job_type, ["Hive", "Pig"]) != -1) {
            res.push("params");
        }
        if ($.inArray(job_type, ["Java", "Pig", "Spark"]) != -1) {
          res.push("args_array");
        }
        return res;
    }

    function load_prior_configs() {
      for(targ in targets) {
        if ($("#id_job_" + targets[targ]).val()!= "") {
          var configs = JSON.parse($("#id_job_" + targets[targ]).val());
          for(conf in configs) {
            add_prop(targets[targ], conf, configs[conf]);
          }
        }
      }
    }

    function hide_unnecessary_fields() {
      if ($.inArray(job_type, ["Java", "Spark"]) != -1) {
        $("[name=job_input]").closest(".form-group").hide();
        $("[name=job_output]").closest(".form-group").hide();
      } else {
        $("[name=java_opts]").closest(".form-group").hide();
        $("[name=main_class]").closest(".form-group").hide();
      }
      if (job_type != "MapReduce.Streaming") {
        $("[name=streaming_mapper]").closest(".form-group").hide();
        $("[name=streaming_reducer]").closest(".form-group").hide();
      }
    }

    properties = {};
    $("label[for=id_property_name]").hide();
    $("#id_property_name").hide().find("option")
            .each(function () {
                properties[$(this).text()] = $(this).val()
            });
    $.each(properties, function (key, value) {
        $("#properties")
                .append($("<option></option>")
                        .attr("value", key)
                        .text(value))
    });
    $("#job_cfg").children().hide();

    var targets;
    var job_type;

    $.ajax({
        url: "launch-job",
        data: {"job_id": $("#id_job").val(),
            "json": true },
        success: function (data, textStatus, jqXHR) {
            job_type = data["job_type"];
            $("#job_type").val(job_type);
            targets = get_targets(job_type);
        },
        complete: function (jqXHR, textStatus) {
            $(targets).each(function (index, target) {
              var template = target == "args_array" ? "#array_table_template" : "#table_template";
              $("#" + target).show().append($(template).text()
                        .replace(/\$target/g, target));
            });
            $("#job_cfg table").hide();
            hide_unnecessary_fields();
            load_prior_configs();
        }
    });
</script>

{% include "horizon/common/_form_fields.html" %}

<input type="hidden" value="{}" name="job_configs" id="job_configs">
<input type="hidden" value="[]" name="job_args_array" id="job_args_array">
<input type="hidden" value="{}" name="job_params" id="job_params">
<input type="hidden" value="" name="job_type" id="job_type">

<datalist id="properties"></datalist>

<div id="job_cfg">
    <div id="configs">
        <label>{% trans "Configuration" %}</label>
    </div>
    <div id="params">
        <label>{% trans "Parameters" %}</label>
    </div>
    <div id="args_array">
        <label>{% trans "Arguments" %}</label>
    </div>
</div>
